@use "sass:math";
@import "variables.scss";

.page {
	height: auto;
	background-color: $page-bk-color;
	display: flex;
	flex-direction: column;
	align-items: center;
	
}

image {
	width: 40rpx;
	height: 40rpx;
}

// ----- ----- ----- header ----- ----- ----- 

.header {
	width: $header-width;
	height: $header-height;
	background-color: $header-bk-color;
}

.postion {
	display: flex;
	align-items: center;
	padding: $position-padding;
	padding-bottom: $position-padding-bottom;
}

.pos-icon {
	width: $pos-icon-size;
	height: math.div($pos-icon-size, $pos-icon-w) * $pos-icon-h;
}

.postion .pos-where {
	margin-left: $pos-where-margin-left;
	font-size: $pos-where-font-size;
	position: relative;
	top: $pos-where-top;
}

.pos-arrow {
	width: $pos-arrow-size;
	height: math.div($pos-arrow-size, $pos-arrow-w) * $pos-arrow-h;
	transform: rotate($pos-arrow-rotate);
	margin-left: $pos-arrow-left;
}

.search {
	width: $search-width;
	height: $search-height;
	position: relative;
	margin: auto;
	margin-top: $search-margin-top;
	display: flex;
	align-items: center;
	border-radius: math.div($search-height, 2);
	background-color: white;
}

.search-icon {
	margin: 0 $search-icon-margin-lr;
	width: $search-icon-size;
	height: math.div($search-icon-size, $search-icon-w) * $search-icon-h;
}

.search-input {
	font-size: $search-input-font-size;
}

.search-btn {
	position: absolute;
	right: $search-btn-right;
	width: $search-btn-width;
	height: $search-btn-height;
	border-radius: math.div($search-btn-height, 2);
	font-size: $search-btn-font-size;
	background-color: $header-bk-color;
	display: flex;
	justify-content: center;
	align-items: center;
}

// ----- ----- ----- nav ----- ----- ----- 

.nav {
	width: $nav-width;
	height: $nav-height;
	margin: $nav-margin;
	display: flex;
	flex-wrap: wrap;
	justify-content: left;
	align-items: center;
}

.nav-item {
	width: math.div($nav-width, 5);
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: $nav-item-font-size;
}

.nav-item image {
	width: $nav-item-image-size;
	height: $nav-item-image-size;
}

.nav-item text {
	margin-top: $nav-item-text-margin-top;
}

// ----- ----- ----- banner ----- ----- ----- 

// .banner {
// 	background-color: blue;
// }

.swiper {
	width: 750rpx;
	height: $banner-height;
	// margin-bottom: $banner-margin-bottom;
}

.banner-content {
	width: $banner-width;
	height: $banner-height;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 100rpx;
	border-radius: $banner-border-radius;
	background-color: pink;
}

// ----- ----- ----- cardTags ----- ----- ----- 

.cardTags {
	width: $card-tags-width;
	height: $card-tags-height;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: $card-tags-margin-tb 0;
}

.card-tag {
	width: $card-tag-width;
	height: $card-tag-height;
	line-height: $card-tag-line-height;
	background-color: white;
	border-radius: 16rpx;
	text-align: center;
	font-size: $card-tag-font-size;
}

.card-tag-total image {
	position: relative;
	top: $card-tag-total-top;
	width: $card-tag-total-size;
	height: $card-tag-total-size;
}

// ----- ----- ----- cards ----- ----- ----- 

.card-item {
	width: $cards-width;
	height: $cards-height;
	background-color: white;
	border-radius: $cards-radius;
	margin-bottom: 20rpx;
}

.card-left {
	width: $card-left-size;
	height: $card-left-size;
}

.card-left image {
	width: $card-left-image-size;
	height: $card-left-image-size;
	margin: $card-left-margin;
	border-radius: $card-image-radius;
}

.card-right {
	width: (460-20)rpx;
	
}


// ----- ----- ----- ----- ----- ----- 
